<template>
	<view class="container">
		<view class="tab-box">
			<view class="tab-item" @tap="tapItem" data-index="0">
				<view class="item-label" :class="{'item-label-active': isShowBox[0]}">已保录</view>
				<view class="item-line" :class="{'item-line-active': isShowBox[0]}"></view>
			</view>
			<view class="tab-item" @tap="tapItem" data-index="1">
				<view class="item-label" :class="{'item-label-active': isShowBox[1]}">未保录</view>
				<view class="item-line" :class="{'item-line-active': isShowBox[1]}"></view>
			</view>
		</view>
		<view class="list-box" v-show="isShowBox[0]">
			<view @tap="tapFans(item.userId)" class="list-item" v-for="(item,index) in oneList" :key="index">
				<image class="avatar" :src="item.userAvatar"></image>
				<view class="name">{{item.userName}}</view>
				<view class="result">{{item.userScoreOffice > 0 ? item.userScoreOffice : item.userScore}}分</view>
				<image class="arrow" src="../../static/images/arrow.png"></image>
			</view>
		</view>
		<view v-if="oneList.length <= 0 && isShowBox[0]" class="no-data">暂无粉丝</view>
		<view class="list-box" v-show="isShowBox[1]">
			<view @tap="tapFans(item.userId)" class="list-item" v-for="(item,index) in twoList" :key="index">
				<image class="avatar" :src="item.userAvatar"></image>
				<view class="name">{{item.userName}}</view>
				<view class="result">{{item.userScoreOffice > 0 ? item.userScoreOffice : item.userScore}}分</view>
				<image class="arrow" src="../../static/images/arrow.png"></image>
			</view>
		</view>
		<view v-if="twoList.length <= 0 && isShowBox[1]" class="no-data">暂无粉丝</view>
		<bottom-nav item-index="1"></bottom-nav>
	</view>
</template>

<script>
	import bottomNav from '../../components/expert_bottom_nav.vue'
	import { myRequest, showToastMsg } from '../../utils'
	
	export default {
		components: { bottomNav },
		data() {
			return {
				curIndex: 0,
				isShowBox: [true, false],
				oneList: [],
				twoList: []
			}
		},
		
		onLoad() {
			this.fetchData()
		},
		
		methods: {
			
			fetchData() {
				const that = this
				
				uni.showLoading({
					title: '加载中'
				})
				
				let success = function(res) {
					uni.hideLoading()
					if (res.data.code != 20000) {
						return showToastMsg(res.data.message)
					}
					
					that.oneList = res.data.data.oneList
					that.twoList = res.data.data.twoList
				}
				
				let param = {
					url: '/expert/fans',
					data: {}
				}
				
				myRequest(param, success)
			},
			
			tapItem(e) {
				this.isShowBox[this.curIndex] = false
				this.curIndex = e.currentTarget.dataset.index
				this.isShowBox[this.curIndex] = true
			},
			
			tapFans(id) {
				uni.navigateTo({
				  url: '/pages/fans_university/fans_university?id=' + id
				})
			}
			
		}
	}
</script>

<style>
	page {
		color: #333333;
		background-color: #eeeeee;
	}
	
	.no-data {
		margin-top: 300rpx;
		font-size: 30rpx;
		color: #666666;
		text-align: center;
	}
	
	.tab-box {
		width: 750rpx;
		height: auto;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		padding-top: 30rpx;
	}
	
	.tab-item {
		width: 375rpx;
	}
	
	.item-line {
		width: 56rpx;
		height: 2rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
	}
	
	.item-line-active {
		background-color: #5683ec;
	}
	
	.item-label {
		font-size: 28rpx;
		color: #333333;
	}
	
	.item-label-active {
		color: #5683ec;
	}
	
	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.list-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #ffffff;
		margin-top: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	
	.avatar {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		margin-left: 48rpx;
	}
	
	.name {
		font-size: 28rpx;
		margin-left: 48rpx;
	}
	
	.result {
		color: #666666;
		font-size: 24rpx;
		margin-left: 300rpx;
	}
	
	.arrow {
		width: 24rpx;
		height: 24rpx;
		margin-left: 30rpx;
	}
</style>
